import react, { useState } from 'react';
import { Button, Upload, Modal, UploadFile} from 'antd';
import { UploadOutlined } from '@ant-design/icons';


export default () => {
  const [message, setMessage] = useState<UploadFile<string>>();
  const [isShow, setIsShow] = useState<boolean>(false);
  const [submitDisable, setSubmitDisable] = useState<boolean>(true);
  const submit = () => {

  }
  return (
    <div style={{
      background: '#fff6',
      margin: '0 auto', 
      width: '60%',
      padding: '50px 20px', 
      border: '5px solid #fff9', 
      borderRadius: '15px' }}>
      <h1 style={{ textAlign: 'center', fontWeight: 900 }}>基于深度学习的骨折判断系统</h1>
      <Modal 
        title={'分析结果'}
        open={isShow}
        onOk={() => { setIsShow(false); }}
        onCancel={() => { setIsShow(false); }}  
      >
        <div style={{ fontSize:'28px' }}>
          {message?.name}:{message?.response ? message?.response : '骨折,请及时就医'}
        </div>
        <hr />
        <div style={{ fontSize: '24px' }}>
          <div>
            1.及时完善骨折部位的X片,了解骨折移位情况,如果没
            有明显移位,及时进行石膏或者夹板固定制动。如果有
            明显的移位,给予手法复位或者手术复位钢板螺钉内固
            定
          </div>
          <div>
            2.药物治疗,可以选择活血化瘀的药物,比如三七片、丹
            参片,另外,就是促进骨折愈合的药物,比如骨瓜提取
            物。
          </div>
          <div>
            3.骨折即骨骼断裂，根据折断方式，骨折可分为不同
            类型。此时骨可能出现裂缝、完全折断或粉碎。若折
            断骨戳出皮肤或者可从伤口看到，则为开放性骨折。
            若折断骨未戳出皮肤且不能从伤口看到，则为闭合性
            骨折。骨质疏松会使骨变脆弱，因此是骨折的危险因
            素。该病在老年女性中尤为常见。
          </div>
        </div>
      </Modal>
      <Upload
        maxCount={1}
        action={'/api/predict'}
        accept={'.nii'}
        onChange={(info) => {
          if (info.file.percent && info.file.percent >= 100) {
            setIsShow(true);
            setMessage(info.file);
          }
        }}>
        
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <Button 
            icon={<UploadOutlined/>} 
            size={'large'}  
            style={{
              margin:'20px 10px',
              width:'300px',
              background: '#fff9',
              fontWeight: 600              
            }}
          >上传nii文件进行分析</Button>
        </div>
      </Upload>
    </div>
  )
}
